<template>
	<el-dialog :title="title" :visible.sync="visible" @close="close">
		<el-form ref="model" :model="model" :rules="rules" label-width="60px">
			<el-form-item label="标题" prop="title">
				<el-input v-model.trim="model.title" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="作者" prop="author">
				<el-input v-model.trim="model.author" autocomplete="off"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="close">取 消</el-button>
			<el-button type="primary" @click="save">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import common from "@/common/common.js";

	export default {
		name: "TableEdit",
		mixins: [common.baseVM],
		data() {
			return {
				model: {
					title: "",
					author: "",
				},
				rules: {
					title: [{
						required: true,
						trigger: "blur",
						message: "请输入标题"
					}],
					author: [{
						required: true,
						trigger: "blur",
						message: "请输入作者"
					}],
				},
				title: "",
				visible: false,
			};
		},
		created() {},
		methods: {
			show(row) {
				if (!row) {
					this.title = "添加";
				} else {
					this.title = "编辑";
					this.model = Object.assign({}, row);
				}
				this.visible = true;
			},
			close() {
				this.resetVal("model");
				this.visible = false;
			},
			doEdit() {
				return {
					msg: "操作成功"
				};
			},
			save() {
				this.formValidate("model", () => {
					const {
						msg
					} = this.doEdit(this.model);
					this.showToast(msg, "success");

					this.$emit("getList");
					this.close();
				});
			},
		},
	};
</script>
